import React, { Component } from 'react';
import Header from '../../components/Header';
import Search from '../../components/Search';
import { reqCartlist,reqCartedit } from '../../http/api';
import { successAlert } from '../../utils/alert';
import ShopCartList from './components/ShopCartList';
import './ShopCart.less';
import { filterPrice } from '../../filters';


export default class ShopCart extends Component {
  constructor(){
    super();
    this.state={
      goodsArr:[],
      groupArr:[],
      goodsAllChecked:false,
      groupAllChecked:false,
      allChecked:false
    }
  }
  get getTotal(){
    let checkArr = this.state.goodsArr?this.state.goodsArr.filter(item=>{
      return item.Checked
    }):[];
    this.state.groupArr && checkArr.concat(this.state.groupArr.filter(item=>{
      return item.Checked
    }))
    
    return checkArr.reduce((total,item)=>{
      return total + Number(item.price) * Number(item.num)
    },0) 
  }
  async changeNum(id,type,num){
    
    let params = {
      type,
      id
    };
    try{
      let res = await reqCartedit(params);
      if(res.data.code===200){
        successAlert(res.data.msg);
        // 重新获取数据
        this.getCartGoods();
      }
    }catch(err){
      console.log(err);
    }
  }
  allChecked(){
    let {goodsArr,groupArr,goodsAllChecked,groupAllChecked,allChecked} = this.state;
  
    if(goodsAllChecked && groupAllChecked){
      goodsArr && goodsArr.forEach(item=>item.Checked=false);
      groupArr && groupArr.forEach(item=>item.Checked=false);
    }else{
      goodsArr&&goodsArr.forEach(item=>item.Checked=true);
      groupArr&&groupArr.forEach(item=>item.Checked=true);
    }

    this.setState({
      goodsAllChecked:!goodsAllChecked,
      groupAllChecked:!goodsAllChecked,
      allChecked:!allChecked
    });
  }
  allListCheck(arr, title){
    let flag;
    if(title==='橙心优选'){
      flag = !this.state.goodsAllChecked;
      this.setState({
        goodsAllChecked: !this.state.goodsAllChecked
      });
      
    }else{
      flag = !this.state.groupAllChecked
      this.setState({
        groupAllChecked: !this.state.groupAllChecked
      });;
      
    }
    
    arr && arr.forEach(item => {
      item.Checked = flag
    });

    if(this.state.goodsAllChecked && this.state.groupAllChecked){
      this.setState({
        allChecked:true
      })
    }else{
      this.setState({
        allChecked:false
      })
    }
  }
  listCheck(arr,index,type){
    arr[index].Checked = !arr[index].Checked;
    let flag = arr.every(item=>item.Checked);
    if(type===1){
      this.setState({
        goodsAllChecked:flag
      });
    }else{
      this.setState({
        groupAllChecked:flag
      });
    }

    
  }
  getCartGoods(){
    reqCartlist({
      uid:JSON.parse(localStorage.getItem('userInfo')).uid
    }).then(res=>{
      if(res.data.code===200){
        
        this.setState({
          groupArr:res.data.list[0].content && res.data.list[0].content.map(item=>{
            return {...item, Checked: false}
          }),
          goodsArr:res.data.list[1].content && res.data.list[1].content.map(item=>{
            return {...item, Checked: false}
          })
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  componentDidMount(){
    this.getCartGoods();
  }
  render() {
    let {goodsArr,groupArr,goodsAllChecked,groupAllChecked,allChecked}=this.state;
    return (
      <div className='ShopCart'>
          <Header title="购物车" back></Header>
          <Search></Search>
          <ShopCartList title={'橙心优选'} goodsArr={goodsArr} changeNum={(id,type,num)=>this.changeNum(id,type,num)} allChecked={goodsAllChecked} listCheck={(arr,index,type)=>this.listCheck(arr,index,type)} allListCheck={(arr, title)=>this.allListCheck(arr, title)}></ShopCartList>
          <ShopCartList title={'万人团'} goodsArr={groupArr} changeNum={(id,type,num)=>this.changeNum(id,type,num)} allChecked={groupAllChecked} listCheck={(arr,index,type)=>this.listCheck(arr,index,type)} allListCheck={(arr, title)=>this.allListCheck(arr, title)}></ShopCartList>
          <div className="total">
            <input type="checkbox" checked={allChecked} onChange={()=>this.allChecked()}/>
            <span>全选</span>
            <span>合计</span>
            <span>￥{filterPrice(this.getTotal)}</span>
            <button>去结算</button>
          </div>
      </div>
    )
  }
}
